<template>
  <div>
    <common-head
      title="商品详情"
    />
    <div class="wrap">
       <!-- 轮播 -->
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="banner in detail.pics"
          :key="banner.id"
        >
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
       <!-- /轮播 -->
       <h4 v-if="detail.basicInfo">{{detail.basicInfo.name}}</h4>
       <!-- <div class="rich-text" v-html="content"></div> -->
       <div class="rich-text" v-html="detail.content"></div>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" @click="$router.push('/home')" text="首页" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" :badge="items.length?items.length:''" />
      <van-goods-action-button type="warning" @click="clickAction(0)" text="加入购物车" />
      <van-goods-action-button type="danger" @click="clickAction(1)" text="立即购买" />
    </van-goods-action>
    <!-- /商品导航 -->
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="itemCard">
        <van-card
          :num="item.num"
          :price="item.minPrice"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #tags>
            <van-stepper v-model="item.num" />
          </template>
          <template #footer>
            <van-button type="warning" @click="confirm" size="large">确定</van-button>
          </template>
        </van-card>
      </div>
      </van-popup>
    <!-- /弹出层 -->
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { getItemDetail } from '@api'
import { mapState, mapActions } from 'vuex'
import { Toast } from 'vant'
export default {
  data () {
    return {
      detail: {},
      show: false,
      value: 2,
      item: {
        num: 1,
        isChecked: true
      },
      action: 0 // 0加入购物车 1立即购买
    }
  },
  created () {
    this.fetchItemDetail()
  },
  methods: {
    confirm () {
      // 点击弹出层 确认按钮
      if (this.action) {
        // 立即购买
      } else {
        // 判断是否存在存在就不添加
        const isExist = this.items.find(el => el.id === this.item.id)
        if (!isExist) {
        // 加入购物车
          this.addCart(this.item)
          Toast('加入购物车成功，请前往购买')
        } else {
          Toast('购物车中已经存在请勿重复添加')
        }
      }
      // 关闭商品
      this.show = false
    },
    clickAction (action) {
      // 点击弹出 商品规格
      this.show = true
      this.action = action
    },
    fetchItemDetail () {
      getItemDetail(this.$route.query.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.detail = res.data.data
          this.item = {
            ...this.item,
            ...res.data.data.basicInfo
          }
        }
      })
    },
    ...mapActions('cart', ['addCart'])
  },
  computed: {
    content () {
      return this.detail.content.replace(/<img/g, '<img style="vertical-align:bottom;width:100%"')
    },
    ...mapState({
      items: (state) => state.cart.carts.items
    })
  },
  components: {
    CommonHead
  }
}

</script>

<style lang="scss" scoped>
.wrap{
  img{
    width:100%;
  }
}
.rich-text /deep/ img{
  vertical-align: bottom;
  width:100%;
}
.itemCard{
  padding-top:20px;
}
</style> 
